<script setup lang="ts">
import { computed } from 'vue';

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

interface Props {
  model: {
    currencyCode: string;
  };
}

defineOptions({
  name: 'CurrencySearch'
});

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const model = computed({
  get() {
    return props.model;
  },
  set(value) {
    Object.assign(props.model, value);
  }
});

function reset() {
  emit('reset');
}

function search() {
  emit('search');
}
</script>

<template>
  <ACard title="搜索" :bordered="false" size="small" class="card-wrapper">
    <AForm :model="model" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" class="search-form">
      <ARow :gutter="[16, 16]">
        <ACol :span="24" :md="12" :lg="6">
          <AFormItem label="货币代码" name="currencyCode">
            <AInput v-model:value="model.currencyCode" placeholder="请输入货币代码" allow-clear @press-enter="search" />
          </AFormItem>
        </ACol>
        <ACol :span="24" :md="12" :lg="6">
          <AFormItem label=" " :colon="false">
            <ASpace>
              <AButton type="primary" ghost @click="search">
                <template #icon>
                  <icon-uil-search class="text-icon" />
                </template>
                搜索
              </AButton>
              <AButton @click="reset">
                <template #icon>
                  <icon-iconamoon-restart class="text-icon" />
                </template>
                重置
              </AButton>
            </ASpace>
          </AFormItem>
        </ACol>
      </ARow>
    </AForm>
  </ACard>
</template>

<style scoped>
.card-wrapper {
  margin-bottom: 20px;
}

.search-form {
  padding-top: 16px;
}
</style>
